<!--
 * @Author: lsl1201
 * @Date: 2023-08-16 10:28:35
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-08-18 14:48:32
-->
<template>
    <div>
        <vue-particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded"
            :options="options">
        </vue-particles>
        <div class="formContainer">
            <h3>智慧工厂-</h3>
            <el-form ref="loginFormRef" :model="loginForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                status-icon>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" type="password" />
                </el-form-item>
            </el-form>
            <el-form-item>
                <el-button class="loginBtn" type="primary" @click="submitForm(loginFormRef)">
                    登录
                </el-button>
            </el-form-item>
        </div>
    </div>
</template>

<script setup>
import { useUserStore } from '../store/useUserStore'
import { useRouter } from 'vue-router'
import { ref, reactive } from 'vue'
import { loadSlim } from "tsparticles-slim";
import options from '../utils/config'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const particlesInit = async engine => {
    //await loadFull(engine);
    await loadSlim(engine);
};
const particlesLoaded = async container => {
};

const router = useRouter()
const { changeUser } = useUserStore()

const loginFormRef = ref('small')
const loginForm = reactive({
    username: 'admin',
    password: '123'
})
// 表单验证规则
const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 18, message: 'Length should be 3 to 18', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 3, max: 18, message: 'Length should be 3 to 18', trigger: 'blur' },
    ],
})

const submitForm = async (formEl) => {
    if (!formEl) return
    // 这个await是校验表单是否为空的,点击提交之后会立即校验一下表单是否为空
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let res = await axios.post('/adminapi/users/login', loginForm)
            // console.log(res.data)
            if (res.data.ActionType === "ok") {
                // 登陆成功后，跳转到首页
                changeUser(res.data.data)
                router.push('/index')
            }else{
                ElMessage.error(res.data.data)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const handleLogin1 = () => {
    // 登陆成功后，跳转到首页
    changeUser({
        "id": 1,
        "username": "admin",
        "password": "123",
        "role": {
            "roleName": "管理员",
            "roleType": 1,
            "rights": [
                "/index",
                "/user-manage",
                "/user-manage/list",
                "/right-manage",
                "/right-manage/rolelist",
                "/right-manage/rightlist",
                "/tag-manage",
                "/tag-manage/list",
                "/interview-manage",
                "/interview-manage/companylist",
                "/interview-manage/companydata",
                "/student-manage",
                "/student-manage/studentlist",
                "/student-manage/gradelist"
            ]
        }
    })
    router.push('/')
}
const handleLogin2 = () => {
    // 登陆成功后，跳转到首页
    changeUser({
        "id": 2,
        "username": "kerwin",
        "password": "123",
        "role": {
            "roleName": "讲师",
            "roleType": 2,
            "rights": [
                "/index",
                "/interview-manage",
                "/interview-manage/companylist",
                "/interview-manage/companydata",
                "/student-manage",
                "/student-manage/studentlist",
                "/student-manage/gradelist"
            ]
        }
    })
    router.push('/')
}
</script>

<style lang="scss" scoped >
.formContainer {
    width: 500px;
    height: 300px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba($color: #000000, $alpha: 0.2);
    text-align: center;
    color: #fff;
    padding: 20px;

    h3 {
        font-size: 30px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    :deep(.el-form-item__label) {
        color: #fff;
    }

    .loginBtn {
        margin-top: 30px;

        margin-left: 120px;
    }


}
</style>